<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->

    <a-modal
      v-model:visible="visible"
      title="设置定额" wrap-class-name="full-modal" 
      width="100%" @ok="onSubmit">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="16">
            <a-form-item label="绝缘工具名称" required v-bind="validateInfos.jueyuangongju">
              <a-input v-model:value="modelRef.jueyuangongju" />
            </a-form-item>
            <!-- <strong>电压试验标准：</strong>  -->
            <a-form-item label="工作电压（kv):" required v-bind="validateInfos.gongzuodianya">
              <!-- <a-input v-model:value="modelRef.gongzuodianya" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.gongzuodianya" :min="1" :max="1000" />
            </a-form-item>
            <!-- <strong>交流试验电压：</strong>  -->
            <a-form-item label="试验电压（kv):" required v-bind="validateInfos.shiyandianya">
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyandianya" :min="1" :max="1000" />
              <!-- <a-input v-model:value="modelRef.shiyandianya" /> -->
            </a-form-item>
            <a-form-item label="试验长度（m):" required v-bind="validateInfos.shiyanchangdu">
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanchangdu" :min="0" :max="1000" />
              <!-- <a-input v-model:value="modelRef.shiyanchangdu" /> -->
            </a-form-item>
            <a-form-item label="试验持续时间（分):" required v-bind="validateInfos.shiyanchixushijian">
              <!-- <a-input v-model:value="modelRef.shiyanchixushijian" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanchixushijian" :min="1" :max="1000" />
            </a-form-item>
            <a-form-item label="试验周期（月):" required v-bind="validateInfos.shiyanzhouqi">
              <!-- <a-input v-model:value="modelRef.shiyanzhouqi" /> -->
              <a-input-number id="inputNumber" v-model:value="modelRef.shiyanzhouqi" :min="1" :max="1000" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="单位:" required v-bind="validateInfos.danwei">
              <a-input v-model:value="modelRef.danwei" />
            </a-form-item>
            <a-form-item label="用途:" required v-bind="validateInfos.yongtu">
              <a-input v-model:value="modelRef.yongtu" />
            </a-form-item>
            <a-form-item label="备注:" required v-bind="validateInfos.beizhu">
              <!-- <a-input v-model:value="modelRef.beizhu" /> -->
              <a-textarea v-model:value="modelRef.beizhu" placeholder="" :rows="4" show-count :maxlength="100" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { reactive,  ref } from 'vue'
// import { toArray } from 'lodash-es'
import { Form, message } from 'ant-design-vue'
// import request from '@/utils/request'
import {QuotaApi} from '../../../api/gd-server-data/data'


// const options = ref([{
//       value: '验电器',
//       label: '验电器',
//     }, 
//     {
//       value: '110kv验电器',
//       label: '110kv验电器',
//     },
//      {
//       value: '27.5kv验电器',
//       label: '27.5kv验电器',
//     },
//      {
//       value: '10kv验电器',
//       label: '10kv验电器',
//     },
//      {
//       value: '打杂杆',
//       label: '打杂杆',
//     },
//      {
//       value: '接地杆',
//       label: '接地杆',
//     },
//      {
//       value: '绝缘手套',
//       label: '绝缘手套',
//     },
//      {
//       value: '绝缘靴',
//       label: '绝缘靴',
//     },
//      {
//       value: '打冰杆',
//       label: '打冰杆',
//     },
//      {
//       value: '绝缘测杆',
//       label: '绝缘测杆',
//     },
//      {
//       value: '绝缘操作手柄',
//       label: '绝缘操作手柄',
//     },
//   ]);
//     const handleChange = value => {
//       console.log(`selected ${value}`);
//     };
//     const handleBlur = () => {
//       console.log('blur');
//     };
//     const handleFocus = () => {
//       console.log('focus');
//     };
//     const filterOption = (input, option) => {
//       return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
//     };

const emit = defineEmits(['loadData'])

const useForm = Form.useForm

const labelCol = reactive({
  span: 4,
})

const wrapperCol = reactive({
  span: 7,
})

const column = reactive({
  workShop: '',
  className: '',
  toolName:'',
  count: '',
  unit: '',
})
const rulesRef = reactive({
  workShop: [{
    required: true,
    message: '请输入车间名称',
  }],
  className: [{
    required: true,
    message: 'Please input class',
  }],
  toolName: [{
    required: true,
    message: 'Please input tool',
  }],
  count: [{
    required: true,
    message: 'Please input count',
  }],
  unit: [{
    required: true,
    message: 'Please input unit',
  }],
})

const {
  validate,
  resetFields,
  validateInfos,
} = useForm(column, rulesRef)


// const onSubmit = () => {
//   // console.log(modelRef.toolName)
//   // column.count=Number(column.count)
//   validate().then(() => {
//     // console.log(imageUrl) 
//     // column.count=Number(column.count)
//       request({
//         url: '/feathers/quota-process',
//         data: {
//           ...column,
//         },
//         method: 'post'
//       }).then(() => {
//         // location.reload()
//         column.workShop= ''
//         column.className = ''
//         column.toolName = ''
//         column.count = ''
//         column.unit=''
//         // 关闭窗口 刷新页面
//         visible.value = false
//         emit('loadData')
//       })
    
//   }).catch(err => {
//     console.log('error', err);
//   });
// };

const onSubmit = () => {
  validate().then(() => {
    QuotaApi.add(column)
      }).then(() => {
        column.workShop= ''
        column.className = ''
        column.toolName = ''
        column.count = ''
        column.unit=''
        // 关闭窗口 刷新页面
        visible.value = false
        emit('loadData')
    message.success('success')
    resetFields()
  }).catch(err => {
    console.log('error', err);
  });
};


const visible = ref(false)
const showModal = () => {
  visible.value = true
}


defineExpose({
  showModal
})
</script>

<style lang="less" >
.full-modal {
  .ant-modal {
    max-width: 100%;
    // max-height: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    // height: 100vh;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
